<template>
    <div class="member">
        <cube-scroll :style="{height:page_height+'px'}">

            <!--S头部用户信息-->
            <div id="header">
                <img class="header" :src="header" />
                <div class="right">
                    <p class="name">{{name}}</p>
                    <p class="uid">uid:{{uid}}</p>
                    <p class="money">余额:{{money}}元</p>
                </div>
            </div>
            <!--E头部用户信息-->

            <!--S控制面板-->
            <ul id="control">
                <li>
                    <router-link to="/member/wallet">
                        <svg class="iconfont" aria-hidden="true">
                            <use xlink:href="#icon-qianbao"></use>
                        </svg>
                        <p>钱包</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/member/coupon">
                        <svg class="iconfont" aria-hidden="true">
                            <use xlink:href="#icon-coupon"></use>
                        </svg>
                        <p>卡券</p>
                    </router-link>
                </li>
            </ul>
            <!--E控制面板-->

        </cube-scroll>

        <!--S子页面-->
        <transition :name="transition_name">
            <router-view class="children" />
        </transition>
        <!--E子页面-->
    </div>
</template>

<script>
import store from "../../store.js";
export default {
    name:"member",
    data(){
        return {
            transition_name:"",
            page_height:store.state.height,
            name:"",
            header:"",
            uid:this.$sysinfo.uid,
            money:0,   //用户余额
        };
    },
    beforeRouteEnter(to,from,next){
        next(vm=>{
            vm.getMoney();
            vm.memberInfo();
        });
    },
    created(){
      this.$parent.tabs_selected = "member";
    },
    mounted(){
        if(this.$route.name == "member"){
            this.page_height = document.documentElement.clientHeight - this.$parent.$refs.footer.getBoundingClientRect().height;
        }
    },
    beforeRouteUpdate(to, from, next){
        if(to.name == "member"){
            this.getMoney();
        }
        this.transition_name = to.meta.sort > from.meta.sort ? "animated slideInRight faster delay-2s" : "animated slideOutRight faster delay-2s";
        setTimeout(()=>{
            next();
        },10);
    },
    methods:{
        //获取用户信息，昵称和头像
        memberInfo(){
            this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                pages:"member",
                doing:"memberInfo",
                uid:this.uid
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.name = res.data.data.nickname;
                        this.header = res.data.data.header;
                    }
                })
                .catch();
        },
        //获取用户余额
        getMoney(){
            this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                pages:"member",
                doing:"easyFind",
                uid:this.$sysinfo.uid,
                return:["money"]
            }))
                .then((res)=>{
                    if(res.data.status == "success"){
                        this.money = res.data.data.money;
                    }
                })
                .catch();
        },
    }
};
</script>

<style scoped>
    .member{
        font-size:16px;
    }
    #header{
        padding:10px 10px 0 10px;
        height:100px;
        background: #FC9153;
        box-sizing: border-box;
        color:#fff;
    }
    #header .header{
        display: block;
        width:80px;
        height:80px;
        border-radius: 50px;
        border:2px solid #fff;
        box-sizing: border-box;
        float:left;
    }
    #header .right{
        padding-top:10px;
        width:260px;
        float: right;
    }
    #header .name{
        width:100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #header .right p{
        margin-bottom: 5px;
    }
    #control{
        padding:10px 10px 0 10px;
        box-sizing: border-box;
        font-size:14px;
    }
    #control li{
        box-sizing: border-box;
        padding-top: 10px;
        width:70px;
        height:70px;
        float:left;
        text-align: center;
        border:1px solid #eee;
    }
    #control li:nth-child(2){
        border-left:none;
    }
    #control li p{
        height:20px;
        line-height: 20px;
    }
    .children{
        position: fixed;
        background: #fff;
        z-index:1;
        top:0;
        width: 375px;
    }
</style>

